<template>
	<view class="uni_box home">
		<navbar :title='info.title?info.title:"任务申请"'>
			<view class="hright" slot="right" @click="getshen">
				<text>申请记录</text>
			</view>
		</navbar>
		<view class="content">
			<view class="shenview">
				<text class="sname">{{info.title}}</text>
				<view class="xuanview" v-for="(item,index) in infolist" :key="index">
					<view class="slist" v-if="item.type == 1">
						<text class="yname">{{item.name}}</text>
						<view class="shuru">
							<u-input v-model="item.data" :value="item.data" type="text" :border="false" placeholder="请输入"/>
						</view>
					</view>
					<view class="slist" v-if="item.type == 2">
						<text class="yname">图片选择</text>
						<view class="tulist">
							<view class="tuitem" @click="upload(index)" v-if="item.data.length<3">
								<image class="addtu" src="/static/img/addtu.png" mode="" />
							</view>
							<view class="tuitem" v-for="(i,ind) in item.data" :key="index">
								<view class="cha" @click="del(index,ind)">
									<image class="shanicon" src="/static/img/shanicon.png"></image>
								</view>
								<image class="addtu" :src="i"></image>
							</view>
						</view>
					</view>
					<view class="slist" v-if="item.type == 3" @click="diClick(index)">
						<text class="yname">地区选择</text>
						<view class="shuru">
							<text class="diview" :class="item.data?'diyou':''">{{ item.data?item.data:'请选择地区' }}</text>
						</view>
					</view>
					<view class="slist" v-if="item.type == 4" @click="timeClick(index)">
						<text class="yname">时间选择</text>
						<view class="shuru">
							<text class="diview" :class="item.data?'diyou':''">{{ item.data?item.data:'请选择时间' }}</text>
						</view>
					</view>
				</view>
				


			</view>
			<view class="shenbot">
				<view class="shenbtn" :style="{
				background: configinfo.zhu_color
			}" @click="shenqing">申请推广</view>
			</view>
		</view>
		<u-picker mode="region" v-model="dishow" @confirm="diconfirm"></u-picker>
		<u-picker mode="time" v-model="timeshow" :params="params"  @confirm="timeconfirm"></u-picker>
	</view>
</template>

<script>
import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		data() {
			return {
				zhucolor: uni.getStorageSync('zhu_color'),
				phone:'',
				dishow:false,
				dizhi:'',
				id:'',
				leitype:'1',
				configinfo:uni.getStorageSync('configinfo'),
				infolist:[],
				info:{},
				pindex:0,//当前下标
				timeshow:false,
				params:{
					year: true,
					month: true,
					day: true,
				},
				headimg:''
			}
		},
		onLoad(option) {
			this.id = option.id
			if(option.leitype){
				this.leitype = option.leitype // 1首页
			}
			this.getDetail()
			this.getDetailparams()
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				if(this.leitype == 1){
					//首页 悬赏
					let res = await this.$u.api.getDetail({
						id:this.id
					});
					this.info= res
				}else if(this.leitype == 2){
					//项目
					let res = await this.$u.api.quangetDetail({
						id:this.id
					});
					this.info = res
				}
				
			},
			async getDetailparams(){
				if(this.leitype == 1){
					//首页
					let res = await this.$u.api.getApplyParams({
						id:this.id
					});
					let shuru = res
					for(let i in shuru){
						if(shuru[i].type == 2){
							//图片
							shuru[i].data = []
						}else{
							shuru[i].data = ''
						}
						
					}
					this.infolist = shuru
				}else if(this.leitype == 2){
					//项目
					let res = await this.$u.api.quangetApplyParams({
						id:this.id
					});
					let shuru = res
					for(let i in shuru){
						if(shuru[i].type == 2){
							//图片
							shuru[i].data = []
						}else{
							shuru[i].data = ''
						}
					}
					this.infolist = shuru
				}
				
			},
			diconfirm(e){
				// console.log(e)
				this.dizhi = e.province.label+'-'+e.city.label+'-'+e.area.label
				let infolist = this.infolist
				infolist[this.pindex].data = this.dizhi
				this.infolist = infolist
				this.$forceUpdate()
			},
			timeconfirm(e){
				// console.log(e)
				let time = e.year+'-'+e.month+'-'+e.day
				let infolist = this.infolist
				infolist[this.pindex].data =time
				this.infolist = infolist
				// console.log(infolist)
				this.$forceUpdate()
			},
			getshen(){
				this.navrouter("/pages_subject/twoPage/MyBaoming?id="+this.id+'&leitype='+this.leitype);
			},
			async shenqing(){
				if(this.leitype == 1){
					//首页
					let data = []
					let infolist = this.infolist
					data =  JSON.parse(JSON.stringify(infolist))
					for(let i in data){
						if(data[i].type == 2){
							//图片转格式
							data[i].data  = data[i].data.toString()
						}
					}
					let res = await this.$u.api.doApply({
						id:this.id,
						data:data
					});
					this.$u.toast("申请成功");
					this.getDetailparams()
					setTimeout(() => {
						this.getshen()
					}, 1000);
				}else if(this.leitype == 2){
					//项目
					let data = []
					let infolist = this.infolist
					data =  JSON.parse(JSON.stringify(infolist))
					for(let i in data){
						if(data[i].type == 2){
							//图片转格式
							data[i].data  = data[i].data.toString()
						}
					}
					let res = await this.$u.api.quandoApply({
						id:this.id,
						data:data
					});
					this.$u.toast("申请成功");
					this.getDetailparams()
					setTimeout(() => {
						this.getshen()
					}, 1000);
				}
			},
			diClick(e){
				this.pindex = e
				this.dishow=true
			},
			timeClick(e){
				this.pindex = e
				this.timeshow=true
			},
			upload(index) {
				this.pindex = index
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
						// this.getavatar();//修改信息
					}
				});
			},
			unloadtou(){
				let that = this
				uni.uploadFile({
					// url: baseUrl + '/api/uploadImage', //仅为示例，非真实的接口地址
					url: baseUrl + '/common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'token':uni.getStorageSync('token'),
					},
					formData: {
						'token':uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						// console.log( JSON.parse(uploadFileRes.data).data);
						let infolist = that.infolist
						infolist[that.pindex].data.push(JSON.parse(uploadFileRes.data).data.fullurl)
						that.infolist = infolist

					}
				});
			},
			del(index,ind){
				// let mpfabu = this.mpfabu
				let infolist = this.infolist
				infolist[index].data.splice(ind,1)
				this.infolist = infolist
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-top: 30rpx;
		.shenview{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			margin:0 30rpx;
			.sname{
				display: block;
				font-weight: bold;
				font-size: 32rpx;
				color: #51565D;
				text-align: center;
			}
		}
		.slist{
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			// align-items: center;
			.yname{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #51565D;
				display: block;
				margin-bottom: 20rpx;
			}
			.shuru{
				padding:15rpx 30rpx;
				background: #F5F5F5;
				border-radius: 20rpx;
				border: 1rpx solid #CCCCCC;
			}
			.diview{
				min-height: 70rpx;
				// color: #333;
				display: flex;
				align-items: center;
				flex: 1;
				color: #c0c4cc;
			}
			.diyou{
				color: #333;
			}
		}
		.tulist{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.tuitem{
				width: 200rpx;
				height: 200rpx;
				margin: 0 20rpx 20rpx 0rpx;
				position: relative;
			}
			.addtu{
				position: absolute;
				width: 100%;
				height: 100%;
			}
		}

		.cha{
			background-color: rgba(0, 0, 0, 0.4);
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			z-index: 10;
			text{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.shanicon{
				position: relative;
				width: 50rpx;
				height: 50rpx;
				// right: 20rpx;
				// top: 20rpx;
			}
		}
		.shenbot{
			margin: 50rpx;
			.shenbtn{
				height: 88rpx;
				background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	
</style>
